<template>
  <div class="container">
    <header>
      <ul class="ulone">
        <li class="left"></li>
        <li class="center"><h5>购物车</h5></li>
        <li class="right" @click="changeEdit">
          <p v-if="isEdit && status == 1 && list.length != 0">编辑</p>
          <p v-else-if="status == 1 && list.length != 0">完成</p>
        </li>
      </ul>
    </header>
    <div v-if="disSelect && status == false">
      <div class="border"></div>
      <div class="zero">
        <p
          style="
            height: 0.64rem;
            line-height: 0.64rem;
            color: #333333;
            margin-right: 0.1333rem;
          "
        >
          登录后将显示购物车中的商品
        </p>
        <van-button
          round
          type="default"
          size="small"
          class="zero-btn"
          color="rgb(243,43,15)"
          @click="zero"
          >点此登录</van-button
        >
      </div>
      <div class="zero-two" style="">
        <van-image
          width="3rem"
          height="3rem"
          :src="require('../images/购物车.png')"
        />
        <p style="color: #333333; margin-top: 0.53333rem">
          登录后可展示购物车中的商品
        </p>
      </div>
    </div>

    <div v-else-if="disSelect && status == 1" class="section">
      <van-image fit="contain" :src="require('../images/cartnull.jpg')" />
      <div class="btn">
        <span class="iconfont icon-gouwuchekong">购物车里啥都没了</span>
        <van-button round type="default" to="index">点我去逛逛</van-button>
      </div>
    </div>
    <section v-else>
      <ul class="sec">
        <li v-for="(item, index) in list" :key="index">
          <div class="che">
            <van-checkbox
              :value="item.checked"
              icon-size="22px"
              checked-color="#ff6600"
              @click="selectItem(index)"
            />
          </div>
          <div class="img"><van-image :src="item.cover" /></div>
          <div class="rig">
            <p class="title">{{ list[index].title }}</p>
            <div style="display: flex; margin-bottom: 5px">
              <p
                style="margin-right: 5px; color: rgb(187, 192, 206)"
                v-for="(i, ind) in item.attrs"
                :key="ind"
              >
                {{ i.list[i.selected].name }}
              </p>
            </div>
            <div class="rig-div">
              <p><span>￥</span>{{ item.pprice }}</p>
              <!-- 步进器 -->
              <van-stepper
                :value="item.num"
                :min="item.minnum"
                :max="item.maxnum"
                @change="changenum($event, item)"
              />
            </div>
          </div>
        </li>
      </ul>
    </section>
    <!-- 完成时页面 -->
    <footer v-if="isEdit && status == 1 && list.length != 0" class="footer">
      <div class="check">
        <van-checkbox
          checked-color="#ff6600"
          :value="checkedAll"
          direction="horizontal"
          icon-size="24px"
          @click="doselectAll"
        />
      </div>
      <!-- 总价 -->
      <div class="total">
        <p>
          合计 :<span>{{ totalPrice }}</span>
        </p>
      </div>
      <!-- 结算 -->
      <div class="settlement">
        <p>去结算</p>
      </div>
    </footer>

    <!-- 编辑界面效果 -->
    <div class="footer" v-else-if="status == 1 && list.length != 0">
      <div class="check">
        <van-checkbox
          :value="checkedAll"
          direction="horizontal"
          icon-size="24px"
          checked-color="#ee0a24"
          @click="doselectAll"
        />
      </div>
      <!-- 总价 -->
      <div class="total total-two">
        <p>添加到收藏</p>
      </div>
      <!-- 结算 -->
      <div class="settlement settlement-two">
        <p @click="dodelgoods">删除</p>
      </div>
    </div>
    <tabbbar></tabbbar>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import tabbbar from "../components/tabbbar.vue";
export default {
  name: "Cart",
  components: { tabbbar },
  data() {
    return {
      active: "cart",
      isEdit: true,
      result: ["a", "b"],
      value: 1,
      checked: true,
    };
  },
  mounted() {
    if (this.status == 1) {
      this.load = false;
      this.$store.dispatch("updateCartList");
      window.sessionStorage.getItem("cart");
      console.log("已获取购物车页面");
    }
  },
  methods: {
    // zero判断
    zero() {
      this.$router.push("/login");
    },
    // 判断编辑完成按钮
    changeEdit() {
      this.isEdit = !this.isEdit;
    },
    changenum(e, item) {
      item.num = e;
      console.log(item.num);
      if (item.num == item.maxnum) {
        Toast("数量已经是最大了");
      }
    },
    // 单选按钮
    ...mapMutations(["selectItem", "delgoods", "clearCart"]),
    ...mapActions(["doselectAll", "dodelgoods"]),
  },
  computed: {
    ...mapState({
      list: (state) => state.cart.list,
      status: (state) => state.user.status,
    }),
    ...mapGetters(["disSelect", "checkedAll", "totalPrice", "disabled"]),
  },
};
</script>

<style scoped>
.container {
  position: relative;
}
.ulone {
  display: flex;
  height: 45px;
  line-height: 45px;
}
.left {
  width: 1.333333rem;
  align-items: center;
  text-align: center;
}

.center {
  flex: 1;
  text-align: center;
}
.center h5 {
  font-size: 22px;
}

.right {
  width: 1.333333rem;
  text-align: center;
  align-items: center;
}
.section {
  width: 100%;
  height: 90vh;
  background-color: rgb(242, 242, 242);
}
.sec li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.466667rem;
  width: 100%;
  padding-left: 5px;
  box-sizing: border-box;
  border-bottom: 1px solid #f1f1f1;
}
.che {
  width: 40px;
}
.img {
  border: 1px solid #f1f1f1;
  width: 2.666667rem;
  height: 2.666667rem;
  padding: 10px;
  box-sizing: border-box;
}
.rig {
  width: 275px;
  padding: 0 10px;
  box-sizing: border-box;
  height: 100px;
}
.rig p {
  line-height: 30px;
  height: 30px;
}
.title {
  font-size: 17px;
}
.rig-div {
  display: flex;
  color: #f60;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
}
.rig-div p {
  font-size: 16px;
}
.footer {
  position: fixed;
  justify-content: center;
  align-items: center;
  bottom: 50px;
  background-color: #fff;
  height: 50px;
  width: 100%;
  display: flex;
}
.check {
  width: 40px;
  padding-left: 8px;
  box-sizing: border-box;
  /* height: 50px; */
  /* line-height: 50px; */
}
.total {
  box-sizing: border-box;
  flex: 1;
  height: 50px;
  line-height: 50px;
  text-align: center;
  /* height: 50px; */
}
.total-two {
  background-color: #f60;
  color: #fff;
}
.settlement {
  height: 50px;
  line-height: 50px;
  text-align: center;
  flex: 1;
  background-color: rgb(255, 102, 0);
  color: #fff;
  /* height: 50px; */
}
.settlement-two {
  background-color: red;
}
.settlement p {
  font-size: 16px;
}
.total p {
  font-size: 16px;
}
.total span {
  color: #f60;
  font-size: 20px;
}
/* 按钮样式 */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.van-button {
  text-align: center;
}
.zero {
  margin-top: 0.2667rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.zero .van-button {
  margin-left: 0.1333rem;
}
.zero-two {
  width: 100%;
  text-align: center;
  background-color: #f2f2f2;
  padding-top: 3.2rem;
  margin-top: 5px;
  box-sizing: border-box;
  height: 80vh;
}
.border {
  width: 100%;
  background-color: #000;
  height: 1px;
  transform: scaleY(0.2);
  transform-origin: 50% 100%;
}
</style>